<template>
    <div>
        <div class="public-title">客户管理</div>
        <div class="function-btn-warp-right">
            <Button icon="md-add" type="dashed" @click="showAddClient = true">新增客户</Button>
        </div>
        <!-- 新增客户 -->
        <Drawer title="新增客户" v-model="showAddClient" width="720" :mask-closable="false" :styles="styles">
            <Form :model="formData" :rules="ruleCustom" ref="formCustom">
                <Row :gutter="32">
                    <Col span="12">
                    <FormItem prop="customName" label="客户姓名" label-position="top">
                        <Input size="large" v-model="formData.customName" placeholder="请输入客户姓名" />
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem prop="customSex" label="客户性别" label-position="top">
                        <Input size="large" v-model="formData.customSex" placeholder="请输入客户性别" />
                    </FormItem>
                    </Col>
                </Row>
                <Row :gutter="32">
                    <Col span="12">
                    <FormItem prop="customPhone" label="客户电话" label-position="top">
                        <Input size="large" v-model="formData.customPhone" placeholder="请输入客户电话" />
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="客户微信" label-position="top">
                        <Input size="large" v-model="formData.customWechartQq" placeholder="请输入客户微信" />
                    </FormItem>
                    </Col>
                </Row>
                <Row :gutter="32">
                    <Col span="12">
                    <p style="padding:5px 12px 10px 0">客户地区</p>
                    <al-selector level='2' size="large" :auto='true' v-model="formData.area" />
                    <!-- <FormItem label="客户地区" label-position="top">
                            <Input size="large" v-model="formData.name" placeholder="please enter user name" />
                        </FormItem> -->
                    </Col>
                    <Col span="12">
                    <!-- <FormItem label="客户生日" label-position="top"> -->
                    <p style="padding:5px 12px 10px 0">客户生日</p>
                    <DatePicker size="large" type="date" placeholder="选择日期" style="width: 200px"></DatePicker>
                    <!-- </FormItem> -->
                    </Col>
                </Row>
                <br>
                <Row :gutter="32">
                    <Col span="12">
                    <FormItem label="婚姻状况" label-position="top">
                        <Input size="large" v-model="formData.customMaritalStauts" placeholder="选择婚姻状况" />
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="客户民族" label-position="top">
                        <Input size="large" v-model="formData.customNation" placeholder="选择客户民族" />
                    </FormItem>
                    </Col>
                </Row>
                <Row :gutter="32">
                    <Col span="12">
                    <FormItem label="婚姻学历" label-position="top">
                        <Input size="large" v-model="formData.customEducation" placeholder="选择婚姻学历" />
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="客户职业" label-position="top">
                        <Input size="large" v-model="formData.customProfession" placeholder="请输入客户职业" />
                    </FormItem>
                    </Col>
                </Row>
                <Row :gutter="32">
                    <Col span="12">
                    <FormItem label="保单编号" label-position="top">
                        <Input size="large" v-model="formData.policyNo" placeholder="请输入保单编号" />
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="保单名字" label-position="top">
                        <Input size="large" v-model="formData.policyName" placeholder="请输入保单名字" />
                    </FormItem>
                    </Col>
                </Row>
                <FormItem label="备注" label-position="top">
                    <Input type="textarea" v-model="formData.remark" :rows="4" placeholder="请输入备注信息" />
                </FormItem>
            </Form>
            <div class="demo-drawer-footer">
                <Button size="large" type="primary" style="margin-right: 8px" @click="addCustomer('formCustom')">提交</Button>
                <Button size="large" @click="showAddClient = false">取消</Button>
            </div>
        </Drawer>
        <!-- 客户信息 -->
        <Drawer width="640" v-model="showClientInfo">
            <p :style="pStyle">客户信息</p>
            <p :style="pStyle">基本资料</p>
            <div class="demo-drawer-profile">
                <Row>
                    <Col span="12">
                    客户姓名: 贤心
                    </Col>
                    <Col span="12">
                    客户性别: 男
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                    客户电话: 18769526199
                    </Col>
                    <Col span="12">
                    客户微信: wp0214
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                    客户地区: 山东济南
                    </Col>
                    <Col span="12">
                    客户生日:2018-09-20
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                    婚姻状况: 已婚
                    </Col>
                    <Col span="12">
                    客户民族:汉
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                    客户学历: 已婚
                    </Col>
                    <Col span="12">
                    客户职业: 工人
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                    保单编号: 23264568236545655
                    </Col>
                    <Col span="12">
                    保单名字: 财产险
                    </Col>
                </Row>
                <Row>
                    <Col span="18">
                    备注: 巴拉巴拉小魔仙巴拉巴拉小魔仙巴拉巴拉小魔仙巴拉巴拉小魔仙巴拉巴拉小魔仙巴拉巴拉小魔仙巴拉巴拉小魔仙巴拉巴拉小魔仙
                    </Col>
                </Row>
            </div>
            <Divider />
            <p :style="pStyle">客户操作</p>
            <Button size="large" type="info">修改资料</Button>
            <Button size="large" type="warning">删除客户</Button>
            <Divider />
        </Drawer>
        <br>
        <div class="crm-list">
            <Card style="width:158px" @click.native="showClientInfo = true">
                <div style="text-align:center">
                    <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                    <h5>王鹏</h5>
                    <h4>山东 济南</h4>
                </div>
            </Card>
            <Card style="width:158px">
                <div style="text-align:center">
                    <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                    <h5>王鹏</h5>
                    <h4>山东 济南</h4>
                </div>
            </Card>
            <Card style="width:158px">
                <div style="text-align:center">
                    <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                    <h5>王鹏</h5>
                    <h4>山东 济南</h4>
                </div>
            </Card>
            <Card style="width:158px">
                <div style="text-align:center">
                    <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                    <h5>王鹏</h5>
                    <h4>山东 济南</h4>
                </div>
            </Card>
            <Card style="width:158px">
                <div style="text-align:center">
                    <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                    <h5>王鹏</h5>
                    <h4>山东 济南</h4>
                </div>
            </Card>
            <Card style="width:158px">
                <div style="text-align:center">
                    <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                    <h5>王鹏</h5>
                    <h4>山东 济南</h4>
                </div>
            </Card>
            <Card style="width:158px">
                <div style="text-align:center">
                    <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                    <h5>王鹏</h5>
                    <h4>山东 济南</h4>
                </div>
            </Card>
            <Card style="width:158px">
                <div style="text-align:center">
                    <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                    <h5>王鹏</h5>
                    <h4>山东 济南</h4>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
export default {
  created() {
    // 获取客户列表
    this.getCustomer();
  },
  data() {
    return {
      activeName: "1",
      showAddClient: false, //展示添加页面
      showClientInfo: false, //展示客户信息
      customList: [], //客户列表
      styles: {
        height: "calc(100% - 55px)",
        overflow: "auto",
        paddingBottom: "53px",
        position: "static"
      },
      pStyle: {
        fontSize: "16px",
        color: "rgba(0,0,0,0.85)",
        lineHeight: "24px",
        display: "block",
        marginBottom: "16px"
      },
      formData: {
        customName: "", //客户姓名
        customSex: "", //客户姓别
        customPhone: "", //客户电话
        customWechartQq: "", //客户微信
        customArea: "", //客户区域
        customMaritalStauts: "", //客户婚姻状况
        customNation: "", //客户民族
        customEducation: "", //客户学历
        customProfession: "", //客户职业
        policyNo: "", //保单编号
        policyName: "", //保单名字
        remark: "", //备注
        area: []
      },
      //   数据验证
      ruleCustom: {
        customName: [
          {
            required: true,
            message: "请输入客户姓名"
          }
        ],
        customSex: [
          {
            required: true,
            message: "请输入客户性别"
          }
        ],
        customPhone: [
          {
            required: true,
            message: "请输入客户性别"
          }
        ]
      }
    };
  },
  methods: {
    //   添加客户
    addCustomer(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$axios({
            method: "post",
            url: this.$GLOBAL.baseURL + "/api/agent/customer/add",
            data: {
              customName: this.formData.customName, //客户姓名
              customSex: this.formData.customSex, //客户姓别
              customPhone: this.formData.customPhone, //客户电话
              customWechartQq: this.formData.customWechartQq, //客户微信
              customArea: this.formData.customArea, //客户区域
              customMaritalStauts: this.formData.customMaritalStauts, //客户婚姻状况
              customNation: this.formData.customNation, //客户民族
              customEducation: this.formData.customEducation, //客户学历
              customProfession: this.formData.customProfession, //客户职业
              policyNo: this.formData.policyNo, //保单编号
              policyName: this.formData.policyName, //保单名字
              remark: this.formData.remark //备注
            }
          })
            .then(result => {
              this.$Notice.success({
                title: "系统通知",
                desc: "新客户添加成功~"
              });
            })
            .catch(err => {
              this.$Notice.error({
                title: "异常提示",
                desc: err.response.data.error
              });
            });
        } else {
          //   this.$Message.error("Fail!");
          return;
        }
      });
    },
    // 根据id查询客户详细信息
    searchCustomerById() {
      this.$axios({
        method: "get",
        url: this.$GLOBAL.baseURL + "/api/agent/customer/search",
        params: {
          id: ""
        }
      })
        .then(result => {
          if (result.data.code == 0) {
            this.customList = result.data.items;
          }
        })
        .catch(err => {});
    },
    // 维护客户信息
    updateCustomer() {
      this.$axios({
        method: "post",
        url: this.$GLOBAL.baseURL + "/api/agent/customer/update",
        data: {
          customName: this.formData.customName, //客户姓名
          customSex: this.formData.customSex, //客户姓别
          customPhone: this.formData.customPhone, //客户电话
          customWechartQq: this.formData.customWechartQq, //客户微信
          customArea: this.formData.customArea, //客户区域
          customMaritalStauts: this.formData.customMaritalStauts, //客户婚姻状况
          customNation: this.formData.customNation, //客户民族
          customEducation: this.formData.customEducation, //客户学历
          customProfession: this.formData.customProfession, //客户职业
          policyNo: this.formData.policyNo, //保单编号
          policyName: this.formData.policyName, //保单名字
          remark: this.formData.remark //备注
        }
      })
        .then(result => {
          if (result.data.code == 0) {
          }
        })
        .catch(err => {});
    },
    // 获取客户列表
    getCustomer() {
      this.$axios({
        method: "get",
        url: this.$GLOBAL.baseURL + "/api/agent/customer/searchList"
      })
        .then(result => {
          if (result.data.code == 0) {
            this.customList = result.data.items;
          }
        })
        .catch(err => {});
    }
  }
};
</script>

<style scoped>
/* cell-cust */
.collapse-title-bar em {
  display: inline-block;
  width: 18%;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* overflow: hidden; */
}
.collapse-title-bar em i {
  vertical-align: middle;
}

.cell-cust-wrap {
  padding-left: 46px;
}
.cell-cust {
  line-height: 24px;
  margin-bottom: 16px;
}
.cell-cust .cell-title {
  display: inline-block;
  width: 80px;
  color: #999;
}
.cell-cust .cell-con {
  display: inline-block;
  cursor: default;
  max-width: 646px;
  vertical-align: top;
}
/* function-btn-warp */
.function-btn-warp {
  text-align: center;
  /* padding-left: 40px; */
}
.function-btn-warp-right {
  text-align: right;
  margin-bottom: 6px;
  margin-top: -45px;
  margin-right: 26px;
}
/* .crm-list  */
.crm-list {
  display: flex;
  flex-wrap: wrap;
}
.crm-list .ivu-card {
  margin-right: 10px;
  margin-bottom: 10px;
}
.crm-list .default-head {
  border-radius: 50%;
  width: 65px;
}
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.demo-drawer-profile {
  font-size: 14px;
}
.demo-drawer-profile .ivu-col {
  margin-bottom: 22px;
}
</style>